<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
	<link href="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
	<script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
	<style>
		.position{
			position: absolute;
			top:28%;
			left:5%;
		}
	</style>
</head>
<body>
<div id="app">
	<h3>请选择条码类型</h3>
	<select class="selectpicker show-tick form-control" data-live-search="true" v-model="selected">
		<option selected v-for="item in type" :value="item.value">{{item.name}}</option>
	</select>
	<h3>请输入需要转换的内容</h3>
	<input type="text" class="form-control" v-model="content">
	<h3>生成的条形码</h3>
	<div>
		<img class="position" id="barcode2"/>
	</div>
</div>


	<script>
		var vm = new Vue({
			el:'#app',
			data:{
			    selected:'',
				content:'',
				type:[
					{name:'EAN13',value:'EAN13'},
					{name:'EAN8',value:'EAN8'},
					{name:'EAN2',value:'EAN2'},
					{name:'CODE39',value:'CODE39'},
					{name:'CODE128',value:'CODE128'},
					{name:'MSI10',value:'MSI10'},
					{name:'MSI11',value:'MSI11'},
					{name:'MSI1010',value:'MSI1010'},
					{name:'MSI1110',value:'MSI1110'},
					{name:'ITF',value:'ITF'},
				]
			},
			updated(){
                setInterval(this.createBarcode(),1);
			},
			methods:{
				createBarcode() {
					JsBarcode("#barcode2", this.content, {
					format:this.selected,
					displayValue:true,
					fontSize:24,
					lineColor: "#0cc"
        		});
        }
			}
		});
	</script>
</body>
</html>
